<template>
  <div class="forgetPassword">
    <div class="return clearfix">
      <router-link to="/home"> 首页 </router-link>
      > {{$route.name}}
    </div>
    <form class="col-md-6 col-md-offset-3 form-horizontal" >
      <fieldset v-show="!isSubmit">
        <div class="form-group">
          <label for="" class="label-control col-md-3">QQ邮箱</label>
          <div class="col-md-9">
            <div class="input-group">
              <input type="text" class="form-control" v-model="checkInfo.QQ" placeholder="请输入绑定QQ邮箱">
              <div class="input-group-addon">qq.com</div>
            </div>
          </div>
        </div>
        <div class="form-group">
          <label for="" class="label-control col-md-3">验证码</label>
          <div class="col-md-4">
            <input type="text" class="form-control" v-model="checkInfo.authCode" placeholder="验证码">
          </div>
          <div class="col-md-3 col-md-offset-2">
            <button class="btn btn-sm btn-default" @click.prevent="getAuthCode">获取验证码</button>
          </div>
        </div>
        <div class="form-group">
          <div class="col-md-2 col-md-offset-3">
            <button class="btn btn-default" @click.prevent="submitAuthCode">验证信息</button>
          </div>
        </div>
      </fieldset>
      <fieldset v-show="isSubmit">
        <div class="form-group">
          <label for="" class="label-control col-md-3">新密码</label>
          <div class="col-md-9">
            <input type="password" class="form-control" v-model="password.new" placeholder="请输入密码">
          </div>
        </div>
        <div class="form-group">
          <label for="" class="label-control col-md-3">确认密码</label>
          <div class="col-md-9">
            <input type="password" class="form-control" v-model="password.confirm" placeholder="请再次输入密码">
          </div>
        </div>
        <div class="form-group">
          <div class="col-md-3 col-md-offset-3">
            <button class="btn btn-primary" @click.prevent="updateUserInfo">提交</button>
          </div>
        </div>
      </fieldset>
    </form>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        isSubmit: true,
        userInfo: {},
        userId: '',
        checkInfo: {
          QQ: '',
          authCode: ''
        },
        password: {
          new: '',
          confirm: ''
        }
      }
    },
    computed: {
      QQEmail () {
        return this.checkInfo.QQ + 'qq.com'
      }
    },
    props: ['rootPath'],
    methods: {
      getAuthCode () {
        this.$http.get(this.rootPath + '/authCode?QQEmail=' + this.QQEmail).then((res) => {
          // 获取成功
          window.alert('验证码已发送到邮箱')
        })
      },
      submitAuthCode () {
        this.$http.post(this.rootPath + '/authCodeTest', {authCode: this.checkInfo.authCode, QQEmail: this.QQEmail}).then((res) => {
          if (Number(res.data) !== 0) {
            this.userInfo = res.data
            this.isSubmit = true
          } else {
            window.alert('验证码错误')
          }
        })
      },
      updateUserInfo () {
        var passPatt = /^[\w]{6,16}$/
        if (!passPatt.test(this.password.new)) {
          return window.alert('密码格式不对')
        }
        if (!(this.password.new === this.password.confirm)) {
          return window.alert('两次密码不一致')
        }
        this.userInfo.password = this.password.new
        this.$http.post(this.rootPath + '/updateUser', this.userInfo).then((res) => {
          if (Number(res.data) === 1) {
            window.alert('密码修改成功！')
            this.$router.push('/login')
          }
        })
      }
    }
  }
</script>